<template>
  <div>
    <page-header-wrapper content="自定义 icon 图标">
      <a-card :bordered="false">
        <h2>使用</h2>
        <p><code>&lt;svg-icon icon=&quot;link&quot; /&gt;</code></p>

        <h2>新增图标</h2>
        <p>1. 前往<a href="https://www.iconfont.cn/">www.iconfont.cn</a>下载svg图标</p>
        <p>2. 将svg文件放置到‘/src/icons/svg’文件夹中</p>
        <p>3. 命令行到项目根目录运行 'yarn svgo'，该指令是压缩处理svg文件</p>
        <p>注：文件名就是icon的名称</p>
      </a-card>
      <a-card>
        <a-card-grid v-for="item of svgIcons" :key="item" class="icon-item" @click="handleClipboard(item,$event)">
          <svg-icon :icon="item" class-name="disabled" />
          <span>{{ item }}</span>
        </a-card-grid>
      </a-card>
    </page-header-wrapper>
  </div>

</template>
<script>
import svgIcons from './svg-icons'

export default {
  name: 'Icons',
  data () {
    return {
      svgIcons
    }
  },
  methods: {
    generateIconCode (symbol) {
      return `<svg-icon icon="${symbol}" />`
    },
    handleClipboard (text, event) {
      this.$copyText(this.generateIconCode(text)).then((e) => {
        this.$message.success('复制成功')
      }, (e) => {
        this.$message.error('复制失败')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    display: flex;
    height: 120px;
    width: 120px;
    text-align: center;
    font-size: 30px;
    color: #444;
    padding: 10px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  span {
    display: block;
    font-size: 14px;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .disabled {
    pointer-events: none;
  }
</style>
